<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>初识vue</title>
        <!--引入vue-->
    <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px;
           background-color: skyblue;
        }
    </style>
    
    <body>
        <div id="app">
            <!-- Vue中的事件修饰符
            1.prevent:阻止默认事件（常用）;
            2.stop：阻止事件冒泡（常用）；
            3.once：事件只触发一次（常用）;
            4.capture:使用事件的捕获模式；
            5.self：只有event。target是当前操作的元素是才触发事件；
            6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕 -->

            <!-- 阻止默认事件 -->
            <a v-bind:href="url" @click.prevent="showinfo">点我提示信息</a>

            <!-- 阻止冒泡 -->
            <div class="demo1" @click="showinfo">
                <button @click.stop="showinfo">点我提示信息</button>
            </div>
            <!-- 只触发一次 -->
            <button @click.once="showinfo">点我提示信息</button>
           
          </div>
        <script type="text/javascript">
            var app = new Vue({
                          el: '#app',
                          data: {
                                message: 'Hello Vue!1',
                                url:"http://baidu.com"
                         },
                         methods:{
                                showinfo(e) {
                                    alert("你好！")
                                }
                            }
                        })
            

        </script>
    </body>
</html>